import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import Header from '../../components/Header/Header'
import { $pre } from '../../http/http'
import { filterPrice } from '../../filters';
import './Cate.less'
import { connect } from "react-redux"
import { bindActionCreators } from 'redux'
import { actions, getCate, getGoods, getN } from "../../store/modules/cate"
class Cate extends Component {
  componentDidMount() {
    let { Cate: { reqCate, reqGoods } } = this.props;
    reqCate();
    reqGoods()
  }


  render() {
    let { getcate, getgoods, n, Cate: { changeCate, reqGoods } } = this.props

    return (
      <div>
        <Header title='分类'></Header>
        {/* Link 没有activeClassName属性 ，NavLink有*/}
        <Link to={'/search'}>Link前往搜索</Link>
        <button onClick={() => {
          this.props.history.push('/search')
        }}>push搜索</button>
        <button onClick={() => {
          this.props.history.replace('/search')
        }}>replace搜索</button>


        <div className='wrap'>
          <div className='left'>
            {getcate.map((item, index) => {
              return <li key={item.id} className={index == n ? 'active' : ''} onClick={() => reqGoods(item.id)}>
                {item.catename}
              </li>
            })}
          </div>
          <div className='right'>
            {getgoods.map((item) => {
              return <Link key={item.id} to={'/detail'+item.id}>
                {/* onClick={()=>toDetail(item.id)} */}
                <img src={$pre + item.img} alt="" />
                <div className='name'>name:{item.goodsname}</div>
                <div>价格：{filterPrice(item.price)}</div>
                <div>市场价格：{filterPrice(item.market_price)}</div>
              </Link>
            })}
          </div>

        </div>
      </div>
    )
  }
}

const mapStateToProps = state => {
  return {
    getcate: getCate(state),
    getgoods: getGoods(state),
    n: getN(state),
  }
};
// 取方法
const mapDispatchToProps = dispatch => {
  return {
    Cate: bindActionCreators(actions, dispatch),
  }
};

export default connect(mapStateToProps, mapDispatchToProps)(Cate)
